<template>
    <el-card class="fatherBox">
        <div class="headerBox">
            <el-button color="#459FFF" plain @click="hideSelMap">
                <el-icon style="margin-right: 5px;">
                    <ArrowLeft />
                </el-icon>返回
            </el-button>
        </div>
        <div class="contentBox">
            <div class="content-top">
                <span>启动地图类型</span>
                <el-radio-group v-model="radio1" style="margin-left: 24px;">
                    <el-radio value="1" size="large">自定义地图</el-radio>
                </el-radio-group>
                <el-button color="#459FFF" plain style="margin-left: 240px;" @click="delMap">
                    <el-icon style="margin-right: 5px;">
                        <Delete />
                    </el-icon>
                    删除
                </el-button>
            </div>
            <div class="content-center">
                <el-icon v-if="!mapInfo.platPic" @click="showDialog"  size="100" color="#BBBCBB"><Plus /></el-icon>
                <img v-else  @click="showDialog" :src="'data:image/png;base64,' + mapInfo.platPic" />
            </div>
            <div class="content-bottom">
                <span>{{ mapInfo.picName }}</span>
                <span class="default">默认</span>
            </div>
        </div>
    </el-card>
    <EditMap v-if="isEditShow" dialogKey="isEditShow" :refresh="getMap"></EditMap>
</template>

<script setup lang="ts">
import { inject, onMounted, provide, ref } from 'vue';
import { GetMap, DelMap } from '@/api/business/space/map';
import EditMap from './component/editMap.vue';
const hideSelMap = inject('hideSelMap');
const radio1 = ref('1');

// 修改图片
const mapInfo: any = ref('')
// 获取默认地图图片
const getMap = async () => {
    const res: any = await GetMap();
    mapInfo.value = res.data
}

// 删除图片
const delMap = () => {
    DelMap(mapInfo.value.id, (res: any) => {
        if (res) {
            mapInfo.value.platPic = ''
        }
    })
}
// 打开弹窗修改
const showDialog = () => {
    isEditShow.value = true;
}

const isEditShow = ref(false);
provide('isEditShow', isEditShow);
onMounted(() => {
    getMap()
})
</script>

<style lang="scss" scoped>
.fatherBox {
    :deep(.el-card__body) {
        height: calc(100vh - 16px - 40px - 106px);
        padding: 0;
    }

    .headerBox {
        height: 49px;
        border-bottom: 1px solid #E9E9E9;
        box-sizing: border-box;
        padding: 10px 0 10px 20px;
        display: flex;
        align-items: center;


    }

    .contentBox {
        font-size: 14px;
        color: #333333;
        height: calc(100% - 49px);
        overflow: auto;
        padding: 0 20px;

        .content-top {
            display: flex;
            align-items: center;

            :deep(.el-radio__label) {
                font-size: 14px;
                color: #333333;
            }
        }

        .content-center {
            margin-left: 100px;
            display: flex;
            .el-icon{
                width: 415px;
                height: 247px;
                border: 1px solid #E9E9E9;
                box-sizing: border-box;
                border-radius: 20px;
                background-color: #ececec;
                cursor: pointer;

            }
            img {
                width: 415px;
                height: 247px;
                cursor: pointer;
                border-radius: 20px;
            }
            img:hover{
                background-color: #999;
            }
        }

        .content-bottom {
            margin-top: 10px;
            margin-left: 100px;

            .default {
                margin-left: 10px;
                font-size: 14px;
                color: #459FFF;
                width: 38px;
                height: 18px;
                background-color: #ecf5ff;
            }
        }
    }
}

.el-button {
    background-color: #fff;
}

.el-button:hover {
    background-color: #ecf5ff;
    color: #459FFF;
}
</style>